<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        元素节点：node
        元素对象：Element
        获取元素对象：
            document.getElementById()
            document.getElementByTagName()
            document.getElementByClassName()
            document.querySelector()
            document.querySelectotAll()

            元素节点：   //不支持换行
            .childNodes  获取节点所有子节点，       包括文本节点  元素节点 注释节点
            .children    获取节点的所有子元素节点   不包括文本节点
            .firstChild  获取第一个子节点           包括文本节点  元素节点 注释节点
            .lastChild   获取最后一个节点           包括文本节点  元素节点 注释节点
            .nextSibling 获取下一个兄弟节点         包括文本节点  元素节点 注释节点
            .previousSibling  获取前一个兄弟节点    包括文本节点  元素节点 注释节点
            .parentNode  获取父节点                 包括元素节点

            I8才支持   //支持标签换行
            .children    获取节点的所有子元素节点   
            .firstElementChild  获取第一个子节点
            .lastElementChild   获取最后一个节点
            .nextElementSibling 获取下一个兄弟节点
            .previousElementSibling  获取前一个兄弟节点


     -->
    <div class="father"><p id="first">段落1</p><p class="two">段落2</p><p>段落3</p></div>  
    <!-- 注意没有回车   也就是标签之间没有换行 -->
    
    <script>
        var father=document.querySelector(".father")
        console.log(father.childNodes);
        console.log(father.firstChild);
        father.firstChild.style.color='red';
        father.lastChild.style.backgroundColor='yellow';
        var first=document.querySelector('#first');
        first.nextSibling.style.backgroundColor='blue';
        first.parentNode.style.border='2px solid black';
    </script>
    
</body>
</html>